<template>
	<view class="content">
		
		<map class="map" :latitude="data.lat" :longitude="data.lng" :markers="covers" @markertap="markertap"></map>
		
		<view class="positionIcon" style="bottom:20%" @tap="toOrder">
			<image class="icons" src="/pages_kafei/pages/static/icon_3.png" mode=""></image>
			<view class="iconName">订单</view>
		</view>
		
		<view class="positionIcon" style="bottom:5%" @tap="toList">
			<image class="icons" src="/pages_kafei/pages/static/icon_6.png" mode=""></image>
			<view class="iconName">列表</view>
		</view>
		
		
	</view>
</template>
<style>
	.content{}
	.content .map{width: 100%;height:100vh;}
	.content .positionIcon{position: fixed;right:5%;z-index: 2;}
	.content .positionIcon .icons{width: 40upx;height:40upx;margin-left: 5upx;}
	.content .positionIcon .iconName{color:#283266;font-size: 20upx;width:50upx;}
</style>
<script>
	import Share from '@/common/wx_share.js'
	export default {
		data() {
			return {
				share:{
					title:"",
					path:'/pages/tabbar/index',
					imageUrl:'',
					desc:'',
					content:''
				},
				data:{
					lat:"",
					lng:""
				},
				title: 'map',
				covers: [
					// {
					// 	id:1,
					// 	title:"名字1",
					// 	latitude:29.55314,
					// 	longitude:106.5686,
					// 	iconPath: '/pages_kafei/pages/static/icon_kafei.png'
					// },
					// {
					// 	id:2,
					// 	title:"這是自己",
					// 	latitude:29.55314,
					// 	longitude:106.5680,
					// 	iconPath: '/pages_kafei/pages/static/icon_mine.png'
					// }
				]

				
			}
		},
		onLoad(){
			var that = this;
			uni.getLocation({
				// type: 'wgs84',
				type: 'gcj02',
				success: function (res) {
					that.data.lng = res.longitude
					that.data.lat = res.latitude
					that.AjaxLoad()
				},
				error:function(e){},
			});
		},
		methods: {
			AjaxLoad(){
				var covers = []
				let param={
					token:this._$userToken("userInfo").token,
					lng:this.data.lng,
					lat:this.data.lat
				};
				this._$InitRequest.request("coffee/make_list", param).then(res => {
					
					var mine = {
						id:0,
						latitude:this.data.lat,
						longitude:this.data.lng,
						iconPath: '/pages_kafei/pages/static/icon_mine.png'
					}
					covers.push(mine)
					
					res.data.forEach( (item,index) =>{
						covers.push({
							id:index+1,
							title:item.name,
							latitude:item.lat,
							longitude:item.long,
							machine_code:item.machine_code,
							model_id:item.model_id,
							iconPath: '/pages_kafei/pages/static/icon_kafei.png'
						})
					})
					for (var i = 0; i < covers.length; i++){this.covers.push( covers[i] )}
					
				},error=>{})
			},
			markertap(e){
				var machine_code = ""
				var model_id = ""
				machine_code = this.covers[e.detail.markerId].machine_code
				model_id = this.covers[e.detail.markerId].model_id
				if( e.detail.markerId == 0 ){
					
				}else{
					uni.navigateTo({
						url:"/pages_kafei/pages/kafeiList_son/kafeiList_son?machine_code=" + machine_code + "&model_id=" + model_id
					})
				}
			},
			toOrder(){
				uni.navigateTo({
					url:"/pages_kafei/pages/order/order"
				})
			},
			toList(){
				uni.navigateTo({
					url:"/pages_kafei/pages/kafeiList/kafeiList"
				})
			},
			
			
		}
	}
</script>
<style lang="scss" scoped>
/deep/ .uni-input-input {font-size:32upx}
/deep/ .uni-radio-input-checked{background-color:rgb(110,43,34) !important;border:2upx solid white !important}
.content .html{
  ::v-deep {
    img {
      width: 100%;
    }
  }
}
</style>